<!--
 * @Descripttion: 供应商管理列表页
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-11 19:53:10
 -->
<template>
  <div :class="{'app-container': oper !== 'select'}">
    <el-card shadow="never" class="oper-btn-card">
      <div class="clearfix">
        <div class="fl">
          <el-button type="primary" :loading="btnLoading.save" @click="btnSaveData">新增供应商</el-button>
          <el-dropdown :show-timeout="60">
            <el-button type="default" @click="btnImport">
              导入<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="out">
                <el-button type="text" style="width:60px;" @click="btnExport">
                  导出
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="fr">
          <div class="clearfix">
            <el-input
              v-model="searchData.keywords"
              class="fl"
              style="width: 360px"
              placeholder="按名称, 联系地址等查询."
              @keydown.enter.native="btnSearch"
            >
              <el-button slot="append" icon="el-icon-search" type="primary" :loading="btnLoading.search" @click="btnSearch()" />
            </el-input>
            <div class="fl paddingL10">
              <el-button
                @click="btnAddData"
              >
                筛选
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-container class="margin-t2">
      <el-aside width="200px" class="border-gay">
        <cate-tree
          ref="cateTree"
          :list-data-fun="listCateFun"
          :save-fun="saveCatFun"
          :del-fun="delCatFun"
          :is-show-oper="isShowOper"
          title="分类 : "
          @node-click="handleNodeClick"
        />
      </el-aside>
      <el-main class="noPadding">
        <div>
          <vxe-grid
            ref="table"
            class="grid"
            border
            resizable
            highlight-hover-row
            :loading="tableLoading.supplier"
            :edit-config="{trigger: 'click', mode: 'row'}"
            :columns="columnsData"
            :data="tableData.supplier"
          />
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="pageInfo.rows"
            :page-sizes="[20,30,40]"
            :current-page.sync="pageInfo.page"
            :total="pageInfo.total"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listData, delData, exportData } from '@/api/bsd/supplier/supplier'
import { listData as listCateData,
  saveData as saveCatData,
  delData as delCatData } from '@/api/bsd/supplier/supplier-cat.js'
import { getDelButton, getUpdateButton, getSelectButton } from '@/components/Table/oper-btns.js'
import CateTree from '@/views/components/Category'
import { exportBlob } from '@/libs/util.js'

export default {
  name: 'SupplierList',
  filters: {
  },
  components: { CateTree },
  mixins: [oftenuse],
  props: {
    oper: {
      type: String,
      default: null
    },
    isShowOper: {
      type: Boolean,
      default: true
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm.$route.params.refresh) {
        vm.listData()
      }
    })
  },
  data() {
    return {
      searchData: {},
      listCateFun: listCateData,
      saveCatFun: saveCatData,
      delCatFun: delCatData,
      dialogVisible: {
        save: false
      },
      columnsData: [
        { type: 'checkbox', align: 'center', width: 60 },
        { title: '操作', width: 80,
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const _this = this
              const delBtnNode = getDelButton(h, { on: { click: () => { _this.btnDelData(row) } }})
              const updateBtnNode = getUpdateButton(h, { props: { type: 'primary' },
                on: { click: () => { this.btnUpdateData(row) } }})
              const selectButton = getSelectButton(h, { props: { type: 'primary' },
                on: { click: () => { this.btnSelectData(row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, this.oper === 'select' ? [selectButton] : [updateBtnNode, delBtnNode])
              return [divNode]
            }
          }
        },
        { field: 'code', title: '编号', width: 150 },
        { field: 'name', title: '供应商名称', width: 150 },
        { field: 'amountDet', title: '应付欠款', width: 120,
          slots: {
            default: ({ row }) => {
              const { originDebt, debt } = row
              const value = this.$amount(originDebt).add(debt).format()
              return [value]
            }
          }
        },
        { field: 'companyTel', title: '单位电话', width: 120 },
        { field: 'contacter', title: '联系人', width: 100 },
        { field: 'phone', title: '联系电话', width: 140 },
        { field: 'address', title: '联系地址', width: 150 },
        { field: 'status', title: '状态', width: 80 },
        { field: 'remarks', title: '备注', width: 150 }
      ]
    }
  },
  watch: {
  },
  created() {
    this.listData()
  },
  methods: {
    btnImport(e) {
      this.$router.push({
        name: 'SupplierImport'
      })
    },
    btnExport(e) {
      e.stopPropagation()
      const loading = this.$loading({ fullscreen: false, text: '导出中' })
      exportData().then(res => {
        loading.close()
        let fileName = res.headers['content-disposition'].split('filename=')[1]
        fileName = decodeURI(fileName)
        const data = res.data
        exportBlob(data, fileName)
      }).catch(_ => {
        loading.close()
      })
    },
    btnSaveData() {
      this.$router.push({ name: 'SupplierAdd' })
    },
    btnSelectData(row) {
      this.$emit('on-select', row)
    },
    btnDelData(row) {
      this.$confirm('是否要进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delData(row.id)
      })
    },
    btnViewData(row) {
      this.dialogVisible.save = true
    },
    btnAddData() {
      this.$router.push({ name: 'SupplierAdd' })
      this.dialogVisible.save = true
    },
    btnSearch() {
      this.setBtnLoading('search', true)
      this.listData().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    btnUpdateData(row) {
      this.$router.push(
        { name: 'SupplierEdit', query: { id: row.id }}
      )
    },
    btnBatchOper() {

    },
    // api
    delData(params) {
      delData(params).then(res => {
        if (!res.data.flag) return
        this.$notify.success(res.data.message)
        this.listData()
      })
    },
    listData(params = { data: this.searchData, page: this.pageInfo }) {
      this.setTableLoading('supplier', true)
      return new Promise((resolve, reject) => {
        listData(params).then(res => {
          if (res.data.flag) {
            const { records, total } = res.data.data
            this.setTableLoading('supplier', false)
            this.setTableData('supplier', records)
            this.pageInfo.total = total
            resolve(res)
          }
        }).catch(err => {
          this.setTableLoading('supplier', false)
          reject(err)
        })
      })
    },
    // on
    handleNodeClick(data) {
      this.$set(this.searchData, 'catId', data.id)
      this.listData()
    },
    onSelectionChange(selectionData) {
      this.setTableSelectionData('supplier', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.listData()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.listData()
    }
  }
}
</script>

<style scoped>

</style>
